<template>
  <div class="view-wrapper">
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" @click="innerVisible = true"
          >添加连锁客户</el-button
        >
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:operate="{ scope }">
          <el-button
            @click="jumpAdd(scope.row.id)"
            size="small"
            v-if="scope.row.status == 3"
            >编辑</el-button
          >
          <el-button
            type="primary"
            @click="jumpMaintain(scope.row)"
            size="small"
            >门店维护</el-button
          >
          <el-button
            type="danger"
            @click="resetPassword(scope.row.id)"
            size="small"
            >重置管理员密码</el-button
          >
          <el-button
            type="primary"
            @click="resetProportion(scope.row.id)"
            size="small"
            v-if="scope.row.status == 2"
            >修改存款比例</el-button
          >
        </template>
      </ex-table>
    </div>
    <el-dialog
      width="50%"
      title="用现有商户当总部"
      :visible.sync="innerVisible"
      append-to-body
      center
    >
      <div class="form_box">
        <div class="form_lable">现有商户营业执照：</div>
        <el-input
          v-model="formInline.businessLicenceNo"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="form_box">
        <div class="form_lable">总部管理员账户：</div>
        <el-input
          v-model="formInline.account"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="form_box">
        <div class="form_lable">发连锁通用卡存管比例：</div>
        <el-input
          v-model="formInline.ratio"
          onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
          placeholder="请输入存管比例"
        >
          <template slot="append">%</template>
        </el-input>
      </div>
      <div class="button_box">
        <el-button @click="innerVisible = false" style="margin-right: 40px"
          >取消</el-button
        >
        <el-button type="primary" @click="sumitAdd" :loading="bLoding"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      width="50%"
      title="连锁通用卡存管比例"
      :visible.sync="proportionVisible"
      append-to-body
      center
    >
      <div class="form_box">
        <div class="form_lable">发连锁通用卡存管比例：</div>
        <el-input
          v-model="totalRatio"
          onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
          placeholder="请输入存管比例"
        >
          <template slot="append">%</template>
        </el-input>
      </div>
      <div class="button_box">
        <el-button @click="proportionVisible = false" style="margin-right: 40px"
          >取消</el-button
        >
        <el-button type="primary" @click="sumitProportionAdd" :loading="cLoding"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
// components
import {
  chainList,
  upgradeChain,
  resetPassword,
  lookRatio,
  editRatio,
} from "@/api/chainManagement";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  //   name: "",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      formInline: {
        businessLicenceNo: "", //营业执照
        account: "", //管理员帐号
        ratio: "", //存管比例
      },
      innerVisible: false,
      proportionVisible: false,
      bLoding: false,
      cLoding: false,
      tableData: [],
      tableColumn: [
        { prop: "businessLicence", label: "企业名称" },
        { prop: "userShortName", label: "客户简称" },
        { prop: "account", label: "管理员账号" },
        { prop: "shopCount", label: "门店数量" },
        { prop: "ratio", label: "通用卡存管比例" }, 
        { prop: "statusDict", label: "状态" },
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "370",
          fixed: "right",
        },
      ],
      totalId: "", //连锁店id
      totalRatio: "",
    };
  },
  created() {
    this.getList();
  },
  computed: {},
  methods: {
    jumpAdd(id) {
      this.$router.push({
        path: "/merchants/chain-customers-add",
        query: { id: id },
      });
    },
    trueInnerVisible() {
      this.formInline = {
        businessLicenceNo: "", //营业执照
        account: "", //管理员帐号
      };
      this.innerVisible = true;
    },
    jumpMaintain(e) {
      let id = e.id;
      let name = e.businessLicence;
      this.$router.push({
        path: "/merchants/store-maintenance",
        query: { id: id, name: name },
      });
    },
    getList() {
      const params = {
        ...this.pageOptions,
      };
      this.loading = true;
      chainList(params)
        .then((res) => {
          const { total, records } = res.result;
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    sumitAdd() {
      this.bLoding = true;
      this.formInline.account = this.formInline.account.replace(/(^\s*)|(\s*$)/g, "");
      console.log(this.formInline.account)
      var params = {
        ...this.formInline,
      };
      upgradeChain(params)
        .then((res) => {
          if (res.result != "") {
            this.$router.push({
              path: "/merchants/chain-customers-add",
              query: res.result,
            });
          } else {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.innerVisible = false;
              this.bLoding = false;
              this.getList();
            }, 600);
          }
        })
        .finally(() => {
          this.bLoding = false;
        });
    },
    sumitProportionAdd() {
      this.cLoding = true;
      var params = {
        id: this.totalId,
        ratio: this.totalRatio,
      };
      editRatio(params)
        .then((res) => {
          console.log("res", res);
          if (res.code == 200) {
            this.proportionVisible = false;
            this.getList();
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 1500,
            });
          }
        })
        .finally(() => {
          this.cLoding = false;
        });
    },
    resetPassword(id) {
      //重置密码
      this.$confirm("是否重置?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(111);
          resetPassword(id).then((res) => {
            this.$message({
              message: "重置成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.getList();
            }, 800);
          });
        })
        .catch(() => {});
    },
    //修改存款比例
    resetProportion(id) {
      this.proportionVisible = true;
      this.totalId = id;
      lookRatio(id)
        .then((res) => {
          const { ratio } = res.result;
          this.totalRatio = ratio;
        })
        .finally(() => {
          this.cLoding = false;
        });
    },
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px;
  display: flex;
  align-items: center;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.form_box {
  ::v-deep .el-input {
    width: 300px !important;
  }
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.list_search {
  display: flex;
  align-items: center;
  padding-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
.add_boxls {
  display: flex;
  align-items: center;
  justify-content: center;
}
.add_box {
  width: 45%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  height: 152px;
  cursor: pointer;
  background: #fdf6ec;
  border: 1px solid #f5dab1;
  color: #e6a23c;
}
.add_box2 {
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  color: #409eff;
}
.add_box:hover {
  opacity: 0.8;
}
.add_box img {
  width: 46px;
  height: 46px;
  margin-right: 12px;
}
.form_box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.form_lable {
  width: 300px;
  text-align: right;
  font-size: 14px;
  color: #606266;
  margin-right: 15px;
}
.button_box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>
